import './ChatTopBar.css'
import useStore from '@/store';

import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';

const ChatTopBar = ({ selectedModel, onSelectedModel, uuid }) => {
    const modelList = useStore(state => state.modelList);

    const isMobileView = useStore(state => state.isMobileView);
    const desktopViewSidebarVisibility = useStore(state => state.desktopViewSidebarVisibility);
    const mobileViewSidebarVisibility = useStore(state => state.mobileViewSidebarVisibility);
    const toggleSidebarVisibility = useStore(state => state.toggleSidebarVisibility);
    const sidebarButtonVisibility = isMobileView ? !mobileViewSidebarVisibility : !desktopViewSidebarVisibility;

    // console.log(sidebarButtonVisibility);


    return (
        <div className='chat-top-bar'>
            <div className='chat-top-bar-content' >
                <button className='button-bar-button' onClick={toggleSidebarVisibility} style={{ display: sidebarButtonVisibility ? '' : 'none' }} >
                    <MenuOutlinedIcon />
                </button>
                <select className='chat-top-bar-model-select' value={selectedModel} onChange={(event) => onSelectedModel(event.target.value)}>
                    {modelList.map(([key, value], index) => {
                        return <option value={value} key={index}>{key}</option>
                    })}
                </select>

            </div>
        </div>
    )
}

export default ChatTopBar;